<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>HTML5笔记 | yale前端技术博客</title>
    <meta name="author" content="Yale">
    
    <meta name="description" content="总结一下，HTML5用到的新的结构标签、多媒体标签、canvas、数据存储的技术以及新增的API，对HTML5有一个整体的把握….">
    
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta property="og:title" content="HTML5笔记"/>
    <meta property="og:site_name" content="Yale"/>

    
    <meta property="og:image" content="undefined"/>
    

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="alternate" href="/atom.xml" title="Yale" type="application/atom+xml">
    <link rel="stylesheet" href="/css/lib/materialize.min.css">
    <link rel="stylesheet" href="/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">

    
        <link rel="stylesheet" href="/css/lib/prettify-tomorrow-night-eighties.css" type="text/css">
    
    <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>


<body>
    <nav class="orange">
    <div class="nav-wrapper">
        <a href="#" data-activates="main-menu" class="button-collapse">
            <i class="fa fa-navicon"></i>
        </a>
        <div class="">
            <a href="/" class="brand-logo hide-on-med-and-down">Yale</a>
            <ul class="right hide-on-med-and-down">
                
                    <li>
                        <a class="menu-home " href="/" >
                            <i class="fa fa-home "></i>
                            
                            首页
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-archive " href="/archives" >
                            <i class="fa fa-archive "></i>
                            
                            归档
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                            <i class="fa fa-bookmark "></i>
                            
                            分类
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-reading " href="/reading" >
                            <i class="fa fa-book "></i>
                            
                            读书
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-about " href="/about" >
                            <i class="fa fa-user "></i>
                            
                            关于
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-search modal-trigger " href="#search" >
                            <i class="fa fa-search "></i>
                            
                            搜索
                        </a>
                    </li>
                
            </ul>
            <div>
    <ul class="side-nav indigo darken-1" id="main-menu">
        
        <li class="side-user">
            <div class="row">
                <div class="col s4 no-padding">
                    <img class="avatar-image circle responsive-img" src="http://ww2.sinaimg.cn/small/74990035jw1f1rjkd681bj20rs0rsdhg.jpg" alt="User Avatar">
                </div>
                <div class="info col s8 valign-wrapper no-padding">
                    <div class="valign">
                        <p class="name">Yale</p>
                        <p class="desc">Web前端/Nodejs/技术宅</p>
                    </div>
                </div>
            </div>
        </li>
        

        
            <li class="no-padding">
                <a class="waves-effect menu-home " href="/" >
                    <i class="fa fa-home "></i>
                    
                    首页
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-archive " href="/archives" >
                    <i class="fa fa-archive "></i>
                    
                    归档
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                    <i class="fa fa-bookmark "></i>
                    
                    分类
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-reading " href="/reading" >
                    <i class="fa fa-book "></i>
                    
                    读书
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-about " href="/about" >
                    <i class="fa fa-user "></i>
                    
                    关于
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-search modal-trigger " href="#search" >
                    <i class="fa fa-search "></i>
                    
                    搜索
                </a>
            </li>
        
    </ul>

    <ul class="side-nav indigo darken-1" id="category-menu">
    

            

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/CSS3/">
                    CSS3 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/CSS3笔记/">
                    CSS3笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/Flex学习笔记/">
                    Flex学习笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/SVG/">
                    SVG <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/HTML5/">
                    HTML5 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/HTML5/HTML5笔记/">
                    HTML5笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/Javascript/">
                    Javascript <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结1/">
                    JavaScript基础知识总结1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结2/">
                    JavaScript基础知识总结2 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/WebSocket/">
                    WebSocket <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/WebSocket/WebSocket实例运用/">
                    WebSocket实例运用 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/学习随想/">
                    学习随想 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/学习随想/学习随想1/">
                    学习随想1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/ES6/">
                    ES6 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中数组和函数的扩展/">
                    ES6中数组和函数的扩展 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中变量声明、解构赋值、模版字符串/">
                    ES6中变量声明、解构赋值、模版字符串 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/微信小程序/">
                    微信小程序 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/微信小程序/微信小程序笔记/">
                    微信小程序笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/nodejs/">
                    nodejs <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/nodejs/nodejs笔记1/">
                    nodejs笔记1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/常用软件下载地址/">
                    常用软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/常用软件下载地址/软件下载地址/">
                    软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

    </ul>
</div>

        </div>
    </div>
</nav>

<div id="search" class="modal search-modal">
    <div class="row">
        <div class="input-field col s12">
              <input id="search-input" type="text">
              <label for="search-input">搜索</label>
        </div>

    </div>
    <div id="search-result" class="search-result col s12">

    </div>
</div>


    <main>
        <div class="container main-container">
    <nav class="page-nav hide-on-small-only">
    <div class="nav-wrapper indigo">
        <span class="breadcrumb">当前位置（分类目录）</span>
        
            
    
    
    <a class="breadcrumb" href="/categories/HTML5/">HTML5</a><a class="breadcrumb" href="/categories/HTML5/HTML5笔记/">HTML5笔记</a>


        

        
    </div>
</nav>

<article>
    <div class="card">
        <div class="card-content">
            

            <div class="article-title">
                
    
        <h1>HTML5笔记</h1>
    


            </div>
            <time class="pink-link-context" datetime="2015-10-11T16:00:00.000Z"><a href="/2015/10/12/HTML5笔记/">2015-10-12</a></time>

            <span id="busuanzi_container_page_pv" class="read-times-container">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>

            
    <div class="tags-row">
        
            <a href="/tags/HTML5知识总结/" class="chip pink lighten-1">HTML5知识总结</a>
        
    </div>


            <div class="toc pink-link-context hide-on-med-and-down">
    <ol class="section table-of-contents"><li class="section table-of-contents-item section table-of-contents-level-1"><a class="section table-of-contents-link" href="#HTML5的目标"><span class="section table-of-contents-text">HTML5的目标</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#HTML5的结构"><span class="section table-of-contents-text">HTML5的结构</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#新增的主体结构元素"><span class="section table-of-contents-text">新增的主体结构元素</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#新增的非主体结构元素"><span class="section table-of-contents-text">新增的非主体结构元素</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#新增的表单input标签的类型"><span class="section table-of-contents-text">新增的表单input标签的类型</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#图像的绘制标签以及多媒体标签"><span class="section table-of-contents-text">图像的绘制标签以及多媒体标签</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#新增的其他的标签"><span class="section table-of-contents-text">新增的其他的标签</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#废除的元素"><span class="section table-of-contents-text">废除的元素</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#新增的属性"><span class="section table-of-contents-text">新增的属性</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#全局属性"><span class="section table-of-contents-text">全局属性</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#文件API"><span class="section table-of-contents-text">文件API</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#FileList对象和file对象"><span class="section table-of-contents-text">FileList对象和file对象</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#拖放API"><span class="section table-of-contents-text">拖放API</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#数据的持久化保存"><span class="section table-of-contents-text">数据的持久化保存</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#通信API"><span class="section table-of-contents-text">通信API</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#Web-Worker"><span class="section table-of-contents-text">Web Worker</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#地理信息API"><span class="section table-of-contents-text">地理信息API</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#DOM的扩展"><span class="section table-of-contents-text">DOM的扩展</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#兼容性问题"><span class="section table-of-contents-text">兼容性问题</span></a></li></ol></li></ol>
</div>


            <div class="entry pink-link-context">
                <p>总结一下，HTML5用到的新的结构标签、多媒体标签、canvas、数据存储的技术以及新增的API，对HTML5有一个整体的把握….<br><a id="more"></a></p>
<h1 id="HTML5的目标"><a href="#HTML5的目标" class="headerlink" title="HTML5的目标"></a>HTML5的目标</h1><p> HTML5的目标就是为了能够创建更简单的Web应用程序，书写出更简洁的HTML代码。</p>
<h2 id="HTML5的结构"><a href="#HTML5的结构" class="headerlink" title="HTML5的结构"></a>HTML5的结构</h2><h3 id="新增的主体结构元素"><a href="#新增的主体结构元素" class="headerlink" title="新增的主体结构元素"></a>新增的主体结构元素</h3><p>1、article元素<br>article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章<br>2、section元素<br>section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2等元素结合起来使用，标示文档结构<br>3、nav元素<br>nav元素表示页面中的导航链接的部分<br>4、aside元素<br>aside元素表示的是article元素内容之外的，与article元素相关的辅助信息<br>5、time元素<br>time元素表示日期或时间，也可以同时表示两者</p>
<h3 id="新增的非主体结构元素"><a href="#新增的非主体结构元素" class="headerlink" title="新增的非主体结构元素"></a>新增的非主体结构元素</h3><p>1、header元素<br>header元素表示页面中的一个区块或整个页面的标题<br>2、hgroup元素<br>hgroup元素用于对整个页面或页面中的一个内容区块的标题进行组合<br>3、footer元素<br>footer元素表示整个页面或页面中的一个内容区块的脚注，一般来说，它包含创作者的姓名、创作日期以及创作者联系信息<br>4、address元素</p>
<h2 id="新增的表单input标签的类型"><a href="#新增的表单input标签的类型" class="headerlink" title="新增的表单input标签的类型"></a>新增的表单input标签的类型</h2><p>1、email类型表示必须输入E-mail地址的文本框<br>2、url类型表示必须输入URL地址的文本输入框<br>3、number类型表示必须输入数值的文本输入框<br>4、range类型表示必须输入一定范围内数字值的文本输入框<br>5、Data Pickers HTML5拥有多个可供选取日期和时间的新型输入文本框<br>（1）、date 选取日、月、年<br>（2）、month 选取月、日<br>（3）、week 选取周和年<br>（4）、time 选取时间（小时和分钟）<br>（5）、datatime 选取时间、日、月、（UTC时间）<br>（6）、datetime-local 选取时间、日、月、年（本地时间）<br>6、color类型用来选取颜色，它提供了一个颜色选择器</p>
<h2 id="图像的绘制标签以及多媒体标签"><a href="#图像的绘制标签以及多媒体标签" class="headerlink" title="图像的绘制标签以及多媒体标签"></a>图像的绘制标签以及多媒体标签</h2><p>1、canvas标签<br>2、video标签<br>video元素定义视频，比如电影片段或其他视频流<br>3、audio标签<br>audio元素定义音频，比如音乐或其他的音频流<br>4、embed元素<br>embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等</p>
<h2 id="新增的其他的标签"><a href="#新增的其他的标签" class="headerlink" title="新增的其他的标签"></a>新增的其他的标签</h2><p>1、details标签<br>details元素表示用户要求得到并且可以得到的细节信息，它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息。summary元素应该是details元素的第一个子元素。<br>2、keygen标签<br>keygen元素表示生成密钥</p>
<h2 id="废除的元素"><a href="#废除的元素" class="headerlink" title="废除的元素"></a>废除的元素</h2><p> 1、对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为页面展示服务的，而HTML5中提倡把页面展示性功能放在CSS样式表中统一编辑，所以将这些元素废除<br>2、不再使用frame框架，对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5中已不支持frame框架，只支持iframe框架，或者用服务器创建的由多个页面组成的复合页面的形式，同时将以上这三个元素废除。</p>
<h2 id="新增的属性"><a href="#新增的属性" class="headerlink" title="新增的属性"></a>新增的属性</h2><p>一、表单相关的属性<br>1、可以对input(type=text)、select、textarea与button元素指定autofocus属性。它可以指定属性的方式让元素在画面打开时自动获取焦点<br>2、可以对input元素（type=text）与textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。<br>3、可以对input、output、select、textarea、button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。<br>4、可以对input元素(type=text)与textarea元素指定required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。<br>5、为input元素增加了几个新的属性：autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。<br>6、为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，他们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态。<br>7、为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件的提交。<br>二、链接相关的属性<br>1、为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用。<br>为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素一致。<br>2、为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小。<br>3、为base元素增加了target属性，主要目的是保持与a元素的一致性<br>三、其他属性<br>1、为ol元素增加属性reversed，它指定列表倒序显示。<br>2、为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且 3、为文档的字符编码的指定提供了一种比较良好的方式<br>4、为menu元素增加了两个新的属性：type和label。label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单，工具条与列表菜单的三种形式出现。<br>5、为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。<br>6、为script元素增加async属性，它定义脚本是否异步执行。<br>7、为html元素增加属性manifest，开发离线Web应用程序时它与API结合使用，定义一个URL上描述文档的缓存信息<br>8、为iframe元素增加三个属性sandbox、seamless与srcdoc，用来提高页面的安全性，防止不信任的Web页面执行某些操作。</p>
<h2 id="全局属性"><a href="#全局属性" class="headerlink" title="全局属性"></a>全局属性</h2><p>全局属性是指可以对任何元素都使用的属性。<br>1、contentEditable属性<br>该属性饿主要功能是允许用户编辑元素中的内容。该属性值为true/false<br>2、designMode属性<br>该属性用来指定整个页面是否可编辑，当页面可编辑时，页面中的任何支持contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改，该属性值为on/off<br>3、hidden属性<br>在HTML5中，所有的元素都允许使用hidden属性，该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使元素处于不可见状态，该属性值为true/false<br>4、spellcheck属性<br>该属性是HTML5针对input元素(type=text)与textarea这两个文本输入框提供的一个新属性，功能是对用户输入的文本内容进行拼写和语法检查，spellcheck属性是一个布尔值属性，具有true或false值，但是它在书写时具有一个特殊的地方，就是必须声明属性值为true或false<br>注意：如果元素的redOnly属性或disabled属性设为true，则不进行拼写检查<br>5、tabindex属性<br>该属性是开发中的一个基本概念，当不断敲击Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。</p>
<h2 id="文件API"><a href="#文件API" class="headerlink" title="文件API"></a>文件API</h2><h3 id="FileList对象和file对象"><a href="#FileList对象和file对象" class="headerlink" title="FileList对象和file对象"></a>FileList对象和file对象</h3><p>通过multiple属性，file控件内允许一次放置多个文件，控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。<br>file对象有两个属性，name属性表示文件名，不包含路径，lastModifiedDate属性表示文件的最后修改日期</p>
<h2 id="拖放API"><a href="#拖放API" class="headerlink" title="拖放API"></a>拖放API</h2><p>实现拖放操作的步骤：<br>1、将想要拖放的对象元素的draggable属性设为true，另外，img元素和a元素（必须指定href）默认允许拖放<br>2、编写与拖放有关的事件处理代码，事件有：dragstart、drag、dragenter、dragover、dragleave、drop、dragend等。</p>
<h2 id="数据的持久化保存"><a href="#数据的持久化保存" class="headerlink" title="数据的持久化保存"></a>数据的持久化保存</h2><p>Web Storage</p>
<p>1、localStorage<br>将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。<br>保存数据：localStorage.setItem(key, value);<br>读取数据：变量 = localStorage.getItem(key);<br>2、sessionStorage<br>将数据保存在session对象中，所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经历的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间所要求保存的任何数据。<br>保存数据：sessionStorage.setItem(key, value);<br>读取数据：变量 = sessionStorage.getItem(key);</p>
<h2 id="通信API"><a href="#通信API" class="headerlink" title="通信API"></a>通信API</h2><p>1、跨文档消息传输功能<br>只要获取到网页所在窗口对象的实例，不仅同源的Web网页之间可以相互通信，甚至实现跨域通信。<br>使用window对象的postMessage方法向其他窗口发送消息<br>window.postMessgae(message, targetOrigin);<br>接收从其他的窗口那里发过来的消息，就必须对窗口对象的message事件进行监视<br>window.addEventListener(‘message’, function() {…}, false)</p>
<p>2、Web Sockets<br>  使用Web Sockets API，可以让客户端与服务端通过socket端口来传递数据，这样做的好处是可以实现数据推送技术——服务端不再是被动地等待客户端发出的请求，只要客户端与服务端建立了一次连接之后，服务端技术可以在需要的时候，主动地将数据推送到客户端，直到客户端显式关闭这个连接。</p>
<h2 id="Web-Worker"><a href="#Web-Worker" class="headerlink" title="Web Worker"></a>Web Worker</h2><p>使用Web Worker API，用户可以很容易地创建在后台运行的线程（在HTML5中被称为worker），如果将可能耗费较长时间的处理交给后台去执行的话，对于用户在前端页面中执行的操作就完全没有影响了。<br>创建后台线程的步骤是在Worker类的构造器中，将需要在后台线程中执行的脚本文件的url地址作为参数，然后创建Worker对象就可以了。<br>var worker = new Worker(‘worker.js’);<br>但是需要注意的是，后台程序是不能访问页面或窗口对象的，如果在后台线程的脚本文件中使用到window对象或document对象，则会引起错误的发生。<br>通过Worker对象的onmessage事件句柄的获取可以在后台线程之中接收消息<br>worker.onmessage = function(event) {<br>    //处理收到的消息<br>}<br>使用Worker对象的postMessage方法对后台线程发送消息<br>worker.postMessage(message);</p>
<h2 id="地理信息API"><a href="#地理信息API" class="headerlink" title="地理信息API"></a>地理信息API</h2><p>Geolocation API的基本知识<br>在HTML5中，为window.navigator对象增加了一个geolocation属性<br>获取当前地理位置,该方法参数为三个回调函数<br>window.navigator.geolocation.getCurrentPosition(sucess, error, options)<br>用途：可以用于调用地图在地图上做一些标记</p>
<h2 id="DOM的扩展"><a href="#DOM的扩展" class="headerlink" title="DOM的扩展"></a>DOM的扩展</h2><p>1、获取元素<br>document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。<br>document.querySelector(‘selector’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。<br>document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。<br>2、类名操作<br>Node.classList.add(‘class’) 添加class<br>Node.classList.remove(‘class’) 移除class<br>Node.classList.toggle(‘class’) 切换class，有则移除，无则添加<br>Node.classList.contains(‘class’) 检测是否存在class<br>Node指一个有效的DOM节点，是一个通称。<br>3、自定义属性<br>在HTML5中我们可以自定义属性，其格式如下data-*=””，例如<br>data-info=”我是自定义属性”，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。<br>Node.dataset是以对象形式存在的<br>当我们如下格式设置时，则需要以驼峰格式才能正确获取<br>data-my-name=”itcast”，获取Node.dataset[‘myName’]</p>
<h2 id="兼容性问题"><a href="#兼容性问题" class="headerlink" title="兼容性问题"></a>兼容性问题</h2><p>在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;!--[if lte IE 8]&gt;</div><div class="line">    &lt;script src=&quot;./js/html5shiv.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;![endif]--&gt;</div></pre></td></tr></table></figure></p>

                
<p class="pink-link-context">
    <a href="/2015/10/19/SVG/" rel="next" title="SVG">
    上一篇：SVG
  </a>
</p>



<p class="pink-link-context">
    <a href="/2015/09/28/JavaScript基础知识总结2/" rel="next" title="JavaScript基础知识总结2">
    下一篇：JavaScript基础知识总结2
  </a>
</p>


            </div>
			
        </div>
    </div>
</article>




    <section id="comment">
        <!-- 多说评论框 start -->
        <div id="ds-thread" class="ds-thread" data-thread-key="2015/10/12/HTML5笔记/" data-title="HTML5笔记" data-url="http://yalesuperman.oschina.io/2015/10/12/HTML5笔记/"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var pathname = location.pathname;

    var duoshuoQuery = {short_name:"yalesuperman"};
        (function() {
            if(pathname === '/about/') {
                return;
            }
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] 
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
        </script>
    <!-- 多说公共JS代码 end -->

    </section>



</div>

        <div class="fixed-action-btn float-sitemap">
    <a class="btn-floating btn-large pink">
      <i class="fa fa-caret-square-o-up"></i>
    </a>
    <ul>
      <li><a class="btn-return-top btn-floating waves-effect green" title="回到顶部"><i class="fa fa-arrow-circle-o-up"></i></a></li>
      <li><a class="btn-floating waves-effect button-collapse yellow darken-1"  data-activates="main-menu" title="menu"><i class="fa fa-navicon"></i></a></li>
    </ul>
  </div>

    </main>
    <footer class="page-footer black darken-1">
    
    <div class="container">
        <div class="row">
            
            <div class="social-group col m4 s12">
                <h5 class="white-text">社交</h5>
                
                    <a class="social-link" href="https://github.com/NotsayJustdo" target="_blank">
                        <i class="fa fa-2x fa-github"></i>
                    </a>
                
                    <a class="social-link" href="" target="_blank">
                        <i class="fa fa-2x fa-rss"></i>
                    </a>
                
                <div class="site-visitors-container white-text">
                    <span>
                        <i class="fa fa-user"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
                    </span>
                    <span>&nbsp;|&nbsp;</span>
                    <span>
                        <i class="fa fa-eye"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
                    </span>
                </div>
            </div>
            

            
        </div>
    </div>
    

    <div class="footer-copyright pink-link-context">
        <div class="container">
            © 2016 yalesuperman, All rights reserved.
            <p class="right" style="margin-top: 0;">本博客由 <a href="https://hexo.io">Hexo</a> 强力驱动 | 主题 <a href="https://github.com/raytaylorlin/hexo-theme-raytaylorism">raytaylorism</a></p>
        </div>
    </div>
</footer>


    <noscript>
    <div class="noscript">
        <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
    </div>
</noscript>
<div class="noscript">
    <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
</div>


<script src="/js/jquery.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
    (function($) {
        $(document).ready(function() {
            // 隐藏禁用javascript（针对微信内置浏览器）的提示
            $('.noscript').hide();

            // 图片缩放效果
            var $imgs = $('img').not('.slider-image').not('.avatar-image').not('.carousel-image').not('.card-cover-image').not('.qrcode');

            // 给图片加上点击放大效果（materialbox插件）
            $imgs.addClass('materialboxed').each(function(i, el) {
                $(this).attr('data-caption', $(this).attr('alt') || ' ');
            }).materialbox();

            // 优化表格的显示
            $('table').each(function() {
                var $table = $(this);
                // 除去多行代码的情况
                if ($table.find('pre').length == 0) {
                    $table.addClass('responsive-table striped bordered');
                }
            });

            // 首页幻灯片
            $('.slider').slider({indicators: false, full_width: true, interval: 8000});

            $(".button-collapse").sideNav();
            $(".category-menu").sideNav();

            // 针对gallery post
            $('.carousel').carousel({full_width: true});
            $('.carousel-control.prev').click(function() {
                $('.carousel').carousel('prev');
            });
            $('.carousel-control.next').click(function() {
                $('.carousel').carousel('next');
            });

            // 文章目录
            $('article').not('.simple-article').find('h1').add('h2').add('h3').add('h4').add('h5').add('h6').scrollSpy();

            // 目录随屏幕滚动（防止目录过长越过footer）
            var $toc = $('.toc');
            var scrollTargetTop = 0;
            $(window).scroll(function() {
                var $activeLink = $toc.find('a.active.section');
                if ($(window).scrollTop() < 100) {
                    scrollTargetTop = 0;
                } else {
                    if ($activeLink[0]) {
                        scrollTargetTop = $activeLink.offset().top - $toc.offset().top;
                    }
                }
                $toc.css('top', '-' + scrollTargetTop + 'px');
            });

            // 修正文章目录的left-border颜色
            var color = $('.table-of-contents-text').css('color');
            $('.table-of-contents-link').css('border-left-color', color);

            // 针对移动端做的优化：FAB按钮点击一下收回
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('.fixed-action-btn').addClass('click-to-toggle');
            }
            // 回到顶部
            $('.btn-return-top').click(function() {
                $('body, html').animate({
                    scrollTop: 0
                }, 500);
            });

            // 重置读书页面的Tab标签页的颜色
            $('li.tab a').hover(function() {
                $(this).toggleClass('text-lighten-4');
            });
            $('.indicator').addClass('pink lighten-2');

            
            // 添加new标签
            $('.menu-reading, .menu-about').append('<span class="new badge pink"></span>');
            

            // 搜索功能
            $('.modal-trigger').leanModal({
                // 打开搜索框时自动聚焦
                ready: function() {
                    if ($('#search').is(":visible")) {
                        $('#search-input').focus();
                    }
                }
            });
            var searchXml = "search.xml";
            if (searchXml.length == 0) {
             	searchXml = "search.xml";
            }
            var searchPath = "/" + searchXml;
            initSearch(searchPath, 'search-input', 'search-result');
        });

        // 初始化搜索与匹配函数
        var initSearch = function(path, search_id, content_id) {
            'use strict';
            $.ajax({
                url: path,
                dataType: "xml",
                success: function(xmlResponse) {
                    // get the contents from search data
                    var datas = $("entry", xmlResponse).map(function() {
                        return {
                            title: $("title", this).text(),
                            content: $("content", this).text(),
                            url: $("url", this).text()
                        };
                    }).get();
                    var $input = document.getElementById(search_id);
                    var $resultContent = document.getElementById(content_id);
                    $input.addEventListener('input', function() {
                        var str = '<ul class=\"search-result-list\">';
                        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                        $resultContent.innerHTML = "";
                        if (this.value.trim().length <= 0) {
                            return;
                        }
                        // perform local searching
                        datas.forEach(function(data) {
                            var isMatch = true;
                            var content_index = [];
                            var data_title = data.title.trim().toLowerCase();
                            var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                            var data_url = data.url;
                            var index_title = -1;
                            var index_content = -1;
                            var first_occur = -1;
                            // only match artiles with not empty titles and contents
                            if (data_title != '' && data_content != '') {
                                keywords.forEach(function(keyword, i) {
                                    index_title = data_title.indexOf(keyword);
                                    index_content = data_content.indexOf(keyword);
                                    if (index_title < 0 && index_content < 0) {
                                        isMatch = false;
                                    } else {
                                        if (index_content < 0) {
                                            index_content = 0;
                                        }
                                        if (i == 0) {
                                            first_occur = index_content;
                                        }
                                    }
                                });
                            }
                            // show search results
                            if (isMatch) {
                                keywords.forEach(function(keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    data_title = data_title.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                });

                                str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                                var content = data.content.trim().replace(/<[^>]+>/g, "");
                                if (first_occur >= 0) {
                                    // cut out 100 characters
                                    var start = first_occur - 20;
                                    var end = first_occur + 80;
                                    if (start < 0) {
                                        start = 0;
                                    }
                                    if (start == 0) {
                                        end = 100;
                                    }
                                    if (end > content.length) {
                                        end = content.length;
                                    }
                                    var match_content = content.substring(start, end);
                                    // highlight all keywords
                                    keywords.forEach(function(keyword) {
                                        var regS = new RegExp(keyword, "gi");
                                        match_content = match_content.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                    });

                                    str += "<p class=\"search-result\">..." + match_content + "...</p>"
                                }
                                str += "</li>";
                            }
                        });
                        str += "</ul>";
                        $resultContent.innerHTML = str;
                    });
                }
            });
        }
    })(jQuery);
</script>


<script src="/js/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>



</body>
</html>
